<template>
  <ElDialog
    v-model="visible"
    draggable
    :title="dialogTitle == '编辑' ? '编辑类型' : '新增类型'"
    width="800px"
    top="4vh"
    :close-on-click-modal="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="报事类型" prop="issueTypeName">
            <ElInput
              v-model="form.issueTypeName"
              placeholder="请输入报事类型"
              maxlength="10"
              show-word-limit
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="类型排序" prop="issueSort">
            <ElInputNumber
                v-model="form.issueSort"
                style="width: 100%"
                :min="1"
                controls-position="right"
              />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="奖励积分" prop="issueScoreNum">
            <ElInputNumber
                v-model="form.issueScoreNum"
                style="width: 100%"
                :min="1"
                controls-position="right"
              />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="上架状态" prop="issueUpFlag">
            <ElSelect v-model="form.issueUpFlag" placeholder="请选择上架状态">
              <ElOption label="隐藏" :value="1" />
              <ElOption label="显示" :value="2" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">取消</ElButton>
        <ElButton type="primary" :loading="loading" @click="handleSubmit"> 确定 </ElButton>
      </div>
    </template>
  </ElDialog>

</template>

<script setup lang="ts">
  import { ref,reactive, computed, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Plus, Delete, Rank } from '@element-plus/icons-vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { recordIssueTypeSaveDataUsingPost, GeoRestVo,recordIssueTypeUpdateDataUsingPost } from '@/api'
  import { clone } from 'xe-utils'


  // 类型定义
  interface Props {
    modelValue: boolean
    restData?: GeoRestVo | null
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (e: 'success'): void
  }

  const dialogTitle = ref('')

  // Props 和 Emits
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    restData: undefined
  })

  // const emit = defineEmits<Emits>()
  const emit = defineEmits(["refresh"]);

  const openDialog = async(row) => {
    if(row){
      if(row.id){
        await Object.assign(form,row)
        dialogTitle.value = '编辑'
      }
    }
    
    visible.value = true
  }



  defineExpose({
  openDialog
});

  // 响应式数据
  const formRef = ref<FormInstance>()

  const loading = ref(false)


  interface MenuFormData {
    issueTypeName: 	string,
    issueSort: number,
    issueScoreNum: 	number,
    issueUpFlag: 	number,
  }

  const form = reactive<MenuFormData>({
    issueTypeName: '',
    issueSort: 1,
    issueScoreNum: 1,
    issueUpFlag: 1,
  })


  // 计算属性
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })

  const isEdit = computed(() => !!props.restData?.id)

  // 表单验证规则
  const rules: FormRules = {
    restName: [
      { required: true, message: '请输入驿站名称', trigger: 'blur' },
      { max: 30, message: '驿站名称不能超过30个字符', trigger: 'blur' }
    ],
    restLongOpenFlag: [{ required: true, message: '请选择开放方式', trigger: 'change' }],
    restUpFlag: [{ required: true, message: '请选择上架状态', trigger: 'change' }],
    restInfo: [{ max: 500, message: '驿站介绍不能超过500个字符', trigger: 'blur' }]
  }

  const handleSubmit = async () => {
    console.log(form,12121);
    
    if (!formRef.value) return

    try {
      await formRef.value.validate()

      loading.value = true
      if(form.id){  
await recordIssueTypeUpdateDataUsingPost({
        body: {
          ...form,
        }
      })

      } else {
await recordIssueTypeSaveDataUsingPost({
        body: {
          ...form,
        }
      })
      }
      ElMessage.success(dialogTitle.value == '编辑' ? '编辑成功' : '新增成功')
      emit('success')
    } finally {
      loading.value = false
    }
  }

    const handleOpen = () => {
    if (isEdit.value) {
      nextTick(() => {
        // form.value = clone(props.restData as GeoRestVo, true)
      })
    } else {
      // 将 form = {} 修改为重置表单属性
      Object.assign(form, {
        issueTypeName: '',
        issueSort: 1,
        issueScoreNum: 1,
        issueUpFlag: 1,
      })
    }
  }

  const handleClose = () => {
    formRef.value?.resetFields()
    nextTick(() => {
      visible.value = false
    })
  }
</script>

<style lang="scss" scoped>
  :deep(.service-item) {
    .el-form-item__content {
      .el-form-item__error {
        margin-top: -12px;
        margin-left: 46px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>
